import React, { useState, useEffect } from 'react'
import {
  List, Skeleton, Pagination, Button, message, Table, Tag, Space, DatePicker,
  Row,
  Col,
  Tabs 
} from 'antd';
import { ArticleListApi, ArticleDelApi } from '../request/api'
import { useNavigate } from 'react-router-dom'
import moment from 'moment'
const { CheckableTag } = Tag;
const { TabPane } = Tabs;
export default function ListList() {
  const [list, setList] = useState([])
  const navigate = useNavigate()
  const [update, setUpdate] = useState(1)

  const [total, setTotal] = useState(0)
  const [current, setCurrent] = useState(1)
  const [pageSize, setPageSize] = useState(10)

  const [selectedTags, setSelectedTags] = useState([])
  const tagsData = ['内科', '外科', '精神科2', '超长可可可可可可可可儿科咳咳咳3','外科4', '精神科5', '外科6', '精神科7','超长可可可可可可可可儿科咳咳咳'];

  // 请求封装
  const getList = (num) => {
    ArticleListApi({
      num,
      count: pageSize
    }).then(res => {
      if (res.errCode === 0) {
        let { arr, total, num, count } = res.data;
        setList(arr);
        setTotal(total);
        setCurrent(num);
        setPageSize(count);
      }
    })
  }

  // 请求列表数据  componentDidMount
  useEffect(() => {
    getList(current)
  }, [])

  // 模拟componentDidUpdate
  useEffect(() => {
    getList(current)
  }, [update])

  // 分页
  const onChange = (pages) => {
    getList(pages);
  }

  // 删除
  const delFn = (id) => {
    ArticleDelApi({ id }).then(res => {
      if (res.errCode === 0) {
        message.success(res.message)
        // 重新刷页面，要么重新请求这个列表的数据   window.reload   调用getList(1)  增加变量的检测
        setUpdate(update + 1)
      } else {
        message.success(res.message)
      }
    })
  }
  const handleChange = (tag, checked) => {

    const nextSelectedTags = checked ? [...selectedTags, tag] : selectedTags.filter(t => t !== tag);
    console.log('You are interested in: ', nextSelectedTags);
    setSelectedTags(nextSelectedTags)
  }
  const callback= (key) => {
    console.log(key);
  }
  
  const columns = [
    {
      title: '診察終了時間(経過時間)',
      dataIndex: 'name',
      key: 'name',
      render: text => <a>{text}</a>,
    },
    {
      title: '受诊科',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '受診者名(フリガナ)',
      key: 'tags',
      dataIndex: 'tags',
      render: tags => (
        <>
          {tags.map(tag => {
            let color = tag.length > 5 ? 'geekblue' : 'green';
            if (tag === 'loser') {
              color = 'volcano';
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: '担当医',
      dataIndex: 'address',
      key: 'address',
      render: tags => (
        <>
          {
           <div className='list-box'>
             <img  className='list-img-box' src="https://tse4-mm.cn.bing.net/th/id/OIP-C.avpyIg0p8EXBUheqaydYCAAAAA?w=186&h=186&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="头像" />
              <span> 大川 智之</span>
            </div>
          }
        </>
      ),
    },
   
    
    {
      title: '電話番号',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '生年月日（月齢）',
      key: 'action',
      
    },
  ];

  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
  ];


  return (
    <div className='list_table' style={{ padding: '20px' }}>
       <Tabs defaultActiveKey="1" onChange={callback}>
    <TabPane tab="本日の診察 " key="1">
      <div className='header-user-name'> 
        <Row>
          <Col span={8} >
            <DatePicker onChange={onChange} />
            <Button type="primary" onChange={onChange}className='header-btn'   >
              今日
            </Button>
            <Button type="primary" onChange={onChange}className='header-btn'   >
              更新
            </Button>
          </Col>
         
          <Col span={13} >
            <div>
              {tagsData.map(tag => (
                <CheckableTag
                  className={selectedTags.indexOf(tag) > -1?"header-tag-checked":'header-tag'}
                  key={tag}
                  checked={selectedTags.indexOf(tag) > -1}
                  onChange={checked => handleChange(tag, checked)}
                >
                  {tag}
                </CheckableTag>
              ))}

            </div>
          </Col>
          <Col span={3} >
            <div className='user-name-box'>
              <span> 大川 智之</span>

              <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.avpyIg0p8EXBUheqaydYCAAAAA?w=186&h=186&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="头像" />
            </div>

          </Col>
        </Row>
      </div>
      <div className='observe-list-box'>
      <div className='list-title-test'>時間指定なし {"5"}人</div>
      <Table columns={columns} dataSource={data} size={"small"}  pagination={false}/>
      </div>
      <div className='observe-list-box'>
      <div className='list-title-test'>診察中</div>
      <Table columns={columns} dataSource={data} size={"small"} pagination={false}/>
      </div>
      <div className='observe-list-box'>
      <div className='list-title-test'>会計待ち</div>
      <Table columns={columns} dataSource={data}size={"small"} pagination={false}/>
      </div>
      <div className='observe-list-box'>
      <div className='list-title-test'>発送待ち</div>
      <Table columns={columns} dataSource={data}size={"small"} pagination={false}/>
      </div>
      <div className='observe-list-box'>
      <div className='list-title-test'>完了</div>
      <Table columns={columns} dataSource={data} size={"small"} pagination={false}/>
      </div>
      <div className='observe-list-box'>
      <div className='list-title-test'>診療取消</div>
      <Table columns={columns} dataSource={data}size={"small"} pagination={false}/>
      </div>
    </TabPane>
    <TabPane tab="タスク" key="2">
      <div className='observe-list-box'>
      <div className='list-title-test'>タスク-覧</div>
      <div className='list-title-test'>会計待ち</div>

      <Table columns={columns} dataSource={data} size={"small"} pagination={false}/>
      </div>
      <div className='observe-list-box'>
      <div className='list-title-test'>発送待ち</div>
      <Table columns={columns} dataSource={data}size={"small"} pagination={false}/>
      </div>
    </TabPane>
   
  </Tabs>
     
     
    </div>
  )
}
